<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>编程式的导航</title>
    <script src="https://unpkg.com/vue@2.7.7/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3.6.5/dist/vue-router.js"></script>
  </head>
  <body>
    <!-- 除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。 -->


    <div id="app1" style="border: 1px dashed red;margin-bottom: 2px;">
      <router-link to="/user/a001">to a001</router-link>
      <router-view></router-view>
    </div>
    
    <div id="app2" style="border: 1px dashed blue;margin-bottom: 2px;">
    </div>

    <script type="text/javascript">
      const User = {template: '<div>User ID: {{$route.params.userId}}</div>'}
      const UserProfile = {template: '<div>UserProfile</div>'}
      const UserPosts = {template: '<div>UserPosts</div>'}
      const UserHome = {template: '<div>UserHome</div>'}
      const RootPath = {template: '<div>RootPath</div>'}

      const router = new VueRouter({
        routes: [{name: 'user', path: '/user/:userId', component: User}]
      })
      
      const vm1 = new Vue({
        router
      }).$mount("#app1")
      
      // 字符串
      vm1.$router.push('home')

      // 对象
      vm1.$router.push({path: 'home2'})
      
      // 命名的路由
      vm1.$router.push({name: 'user', params: {userId: 'b002'}})
      
      // 带查询参数，变成 /register?plan=private
      vm1.$router.push({path: 'register', query: {plan:'private'}})
      
      //   注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path：
      // (同样的规则也适用于 router-link 组件的 to 属性)
      const userId = 'c003'
      const userId2 = 'c004'
      vm1.$router.push({name: 'user', params:{userId}}) // -> /user/c003
      vm1.$router.push({path:`/user/${userId2}`}) // -> /user/c004
      // 这里的 params 不生效
      vm1.$router.push({path:'/user/', params: {userId}}) // // -> /user

      // router.go(n): 这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。
      // 在浏览器记录中前进一步，等同于 history.forward()
      router.go(1)
      
      // 后退一步记录，等同于 history.back()
      router.go(-1)
      
      // 前进 3 步记录
      router.go(3)
      
      // 如果 history 记录不够用，那就默默地失败呗
      // router.go(-100)
      // router.go(100)
    </script>
  </body>
</html>